var canvas = document.querySelector('.cover');
var ctx = canvas.getContext("2d");

//六边形横向宽
width = 420;
//边框粗细
borderWidth = 3;
//六边形边长
hexagonWidth = (width - borderWidth) / 4;

//设置canvas宽高
canvas.width = width;
canvas.height = 480;

//图片缩放比例
imgScale = 0.5;

//绘制图片
var img = new Image()
img.src = '../images/food01.jpeg'
img.onload = function () {
    ctx.drawImage(this, canvas.width / 2 - img.width / 2 * imgScale, canvas.height / 2 - img.height / 2 * imgScale, img.width * imgScale, img.height * imgScale)

    //如果图片绘制后覆盖边框，可再次调用一边绘制六边形代码
}

//绘制六边形，裁切
ctx.beginPath();
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.strokeStyle = '#79b1f7';
ctx.lineWidth = borderWidth;
ctx.lineTo(-1 * hexagonWidth, Math.sqrt(3) * hexagonWidth);
ctx.lineTo(1 * hexagonWidth, Math.sqrt(3) * hexagonWidth);
ctx.lineTo(2 * hexagonWidth, 0 * hexagonWidth);
ctx.lineTo(1 * hexagonWidth, -1 * Math.sqrt(3) * hexagonWidth);
ctx.lineTo(-1 * hexagonWidth, -1 * Math.sqrt(3) * hexagonWidth);
ctx.lineTo(-2 * hexagonWidth, 0 * hexagonWidth);
ctx.lineTo(-1 * hexagonWidth, Math.sqrt(3) * hexagonWidth);
ctx.stroke();
ctx.restore();
ctx.clip();
ctx.closePath();

//图片缩放比例
imgScale = 1;

//如果图片绘制后覆盖边框，可再次调用一边绘制六边形代码
ctx.beginPath();
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.strokeStyle = 'transparent';
ctx.lineWidth = borderWidth;
ctx.lineTo(-1 * hexagonWidth, Math.sqrt(3) * hexagonWidth);
ctx.lineTo(1 * hexagonWidth, Math.sqrt(3) * hexagonWidth);
ctx.lineTo(2 * hexagonWidth, 0 * hexagonWidth);
ctx.lineTo(1 * hexagonWidth, -1 * Math.sqrt(3) * hexagonWidth);
ctx.lineTo(-1 * hexagonWidth, -1 * Math.sqrt(3) * hexagonWidth);
ctx.lineTo(-2 * hexagonWidth, 0 * hexagonWidth);
ctx.lineTo(-1 * hexagonWidth, Math.sqrt(3) * hexagonWidth);
ctx.stroke();
ctx.restore();
ctx.closePath();


// 移入放大移出恢复
$(".cover").on('mouseover', function () {
    $(this).css('transform', 'scale(1.1)')
}).on('mouseout', function () {
    $(this).css({
        'transform': 'scale(1)',
        'transform': 'rotate(30deg)'
    })
})

